import SelectShop from './SelectShop';
import { getTags } from '@/api/channel';
import { useEffect, useState } from 'react';
//  导入Card
import { Card,Input,DatePicker,Checkbox,Upload,Radio,Select,Image,Modal,Table,Button} from 'antd';
// 导入dayjs
import dayjs from 'dayjs';
// 导入gruoBuyInfo类型
import type { GroupInfoType} from '@/types/index';
// 定义AddInfo Props类型
interface IProps {
  groupBuyInfo: GroupInfoType;
  setCurrent: (current: number) => void;
  setGroupBuyInfo: (groupBuyInfo: GroupInfoType) => void;
}
// 定义标签类型
interface TagType {
  key: React.Key;
  id: string;
  type: string;
  pic: string;
  name:string
}
// RagnePicker组件
const { RangePicker } = DatePicker;
// 标签的列
var tagColumns = [
  {  title: 'id', dataIndex: 'id', key: 'id' },
  {  title: '标签名称', dataIndex: 'name', key: 'name' },
  {  title: '图片', dataIndex: 'pic', key: 'pic',render:(pic:string)=> <Image src={pic} style={{width:50}} /> },
  {  title: '类型', dataIndex: 'type', key: 'type',render:(type:string) =>type==='1'?'活动':'团购' },

]

function AddInfo({groupBuyInfo,setGroupBuyInfo,setCurrent}:IProps) {
  // 定义选中的店铺(显示选中店铺的名称)
  const [selectShop,setSelectShop] = useState<any>([])
  // isShow 用来控制弹框是否显示
  const [isShow,setIsShow] = useState(false)
  // 上传图片
  const handleChange = ({file}: any) => {
    if(file&&file.response){
      console.log(file,file.response)
      // 更新groupBuyInfo.banner
      setGroupBuyInfo({...groupBuyInfo,banner:'http://dida100.com:8888'+file.response.file.path})
    }
  }
  // 弹框是否显示
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 选中标签
  const [selectTag,setSelectTag]  = useState<TagType>({
    key: 0,
    id: "",
    type: '',
    pic: '',
    name:''
  });
  // 标签列表
  const [tagList,setTagList] = useState<TagType[]>([])
  // 获取标签参数
  const [tagParams,setTagParams] = useState({type:"1",current:1,size:5})
  // 获取标签列表的方法
  const getTagList = async () => {
    const res = await getTags(tagParams);
    setTagList(res.data.data);
  }
  const showModal = () => {
        setIsModalOpen(true);
  };
  // 当tagParams发生变化时候获取标签列表
  useEffect(()=>{
    getTagList()
  },[tagParams])
  // 当弹框显示时候获取标签列表
  useEffect(()=>{
    if(isModalOpen){
      getTagList()
    }
  },[isModalOpen])
  const handleOk = () => {
    setIsModalOpen(false);
    // 更新groupBuyInfo.tag
    setGroupBuyInfo({...groupBuyInfo,tag:selectTag.id})
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  
  // 表格选项---------------------------------------------------------
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: TagType[]) => {
      // selectedRowKeys 选中的key  selectedRows 选中的行
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      // 更新选中的标签
      setSelectTag(selectedRows[0])
      
    },
    
  };
  // 表格选择结束-------------------------------------------------------
  return ( <div className='AddInfo'>
    <Card title="活动信息">
      <div className='item'>
        <label>活动名称：</label>
        <Input  value={groupBuyInfo.name} onChange={(e) => {
          setGroupBuyInfo({
            ...groupBuyInfo,
            name: e.target.value
          })
        }} />
      </div>
      <div className='item'>
        <label>活动时间：</label>
        <RangePicker 
        format={'YYYY-MM-DD HH:mm:ss'}
        value={[dayjs(groupBuyInfo.startTime),dayjs(groupBuyInfo.endTime)]} 
        onChange={(date,dateString) => {
          setGroupBuyInfo({...groupBuyInfo,startTime:dateString[0],endTime:dateString[1]})
        }} />
      </div>
      <div className='item'>
        <label>广告语：</label>
        <Input  value={groupBuyInfo.slogan} onChange={(e) => {
          setGroupBuyInfo({...groupBuyInfo,slogan:e.target.value})
        }} />
      </div>
      <div className='item'>
        <label>首页是否展示：</label>
         <Checkbox checked={groupBuyInfo.showHome?true:false} onChange={(e) => setGroupBuyInfo({
            ...groupBuyInfo,
            showHome: e.target.checked?1:0
         })} />          
      </div>
      <div className='item'>
        <label>首页展示图：</label>
        <Upload
        name="file"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        action="http://dida100.com:8888/api/file/upload"
        onChange={handleChange}
      >
        {groupBuyInfo.banner ? <img src={groupBuyInfo.banner} alt="avatar" style={{ width: '100px' }} /> : <div>上传图片</div>}
      </Upload>
      </div>
      <div className='item'>
        <label>活动主题页展示样式：</label>
        <Radio.Group value={groupBuyInfo.showType} onChange={(e) => {
          setGroupBuyInfo({...groupBuyInfo,showType:e.target.value})
        }}>
        <Radio value="1">样式一</Radio>
        <Radio value="2">样式二</Radio>
        <Radio value="3">样式三</Radio>
        </Radio.Group>
      </div>
      <div className='item'>
        <label>选择标签：</label>
        <div>
        <Select 
          value={tagParams.type}
        onChange={(e:any)=>{
         
          setTagParams({...tagParams,type:e})    
          setIsModalOpen(true)      
        }} style={{width:'290px'}}>
          <Select.Option value="1">团购标签</Select.Option>
          <Select.Option value="2">活动标签</Select.Option>
        </Select>
        </div>
        
        <Image   
          onClick={showModal}
          preview={false}
          width={100}
          height={100}
          fallback=''
          src={selectTag.pic}
          />
      </div>
      <div className='item'>
        <label>选择店铺：</label>
        <div className='item-content' onClick={()=>setIsShow(true)}>
          {selectShop.length?selectShop.map((item:any)=>item.name).join(","):'请选择店铺'}        
        </div>
      </div>
    </Card>
    <Button type="primary" onClick={()=>setCurrent(1)}>下一步选择商品</Button>
    <p>{JSON.stringify(groupBuyInfo)}</p>
    <Modal title="选择标签" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Table 
         rowSelection={{
          type:'radio',
          ...rowSelection,
        }}
        rowKey="id"
        dataSource={tagList} columns={tagColumns}/>
      </Modal>
      <SelectShop isShow={isShow} onCancel={()=>setIsShow(false)} onOk={(rightList)=>{
          // 关闭弹窗
          setIsShow(false);
          // 更新selectShop用于显示店铺的名称
          setSelectShop(rightList);
          //更新gruopBuyInfo
          setGroupBuyInfo({
            ...groupBuyInfo,
            shop:rightList.map((item:any)=>item.id).join(",")
          });
      }}/>
  </div> );
}

export default AddInfo;